@import "./Reset";

@function pxTovw($px, $baseFs: 3.75px) {
  @return ($px/$baseFs) * 1vw;
}
.warp {
  width: pxTovw(375px);
  header {
    width: pxTovw(375px);
    border-bottom: 15px solid #e4e4e4;
    .top {
      width: pxTovw(375px);
      //   height: pxTovw(52px);
      margin-top: pxTovw(14px);
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom: 1px solid #e4e4e4ff;
      span {
        width: pxTovw(13px);
        height: pxTovw(20px);
        line-height: pxTovw(20px);
        display: inline-block;
        margin-left: pxTovw(15px);
        color: #555555;
        font-size: pxTovw(20px);
      }
      p {
        width: pxTovw(347px);
        // height: pxTovw(52px);
        line-height: pxTovw(52px);
        margin: 0 auto;
        text-align: center;
        font-size: pxTovw(16px);
        color: #555555;
      }
    }
    .content {
      width: pxTovw(375px);
      height: pxTovw(265.99px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      opacity: 1;

      p {
        &:nth-of-type(1) {
          width: pxTovw(127.5px);
          height: pxTovw(84.66px);

          img {
            width: 100%;
            height: 100%;
          }
        }
        &:nth-of-type(2) {
          margin-top: pxTovw(11px);
          text-align: center;
          width: pxTovw(126px);
          height: pxTovw(20px);
          font-size: pxTovw(14px);
        }
      }
      button {
        margin-top: pxTovw(11px);
        width: pxTovw(122px);
        height: pxTovw(30px);
        font-size: pxTovw(14px);
        color: #fff;
        border: 1px solid #81502b;
        background-color: #81502b;
      }
    }
}
main {
  width: pxTovw(375px);
    // box-shadow: 0px 0px 10px #888888;
  margin-bottom:pxTovw(90px) ;
  .love {
    width: pxTovw(375px);
    background: #f7f8f8ff;

    opacity: 1;
    color: #f7f7f8;
    p {
      width: pxTovw(70px);
      height: pxTovw(25px);
      padding-top:pxTovw(20px) ;
      opacity: 1;
      color: #555555ff;
      font-size: pxTovw(17.5px);
      font-weight: pxTovw(400px);
      font-family: "PingFang SC";
      text-align: left;
      padding-left: pxTovw(15px);
    }
  }
  .live {
    width: pxTovw(375px);
    // margin-top: pxTovw(20px);
    background-color:  #f7f8f8ff;
    // background: #f7f8f8ff;
    // .love {
    //   width: pxTovw(375px);
    //   margin-left: pxTovw(10px);
    // //   background-color: #fff;
    // //   opacity: 1;
    //   color: #f7f7f8;
    //   p {
    //     width: pxTovw(70px);
    //     height: pxTovw(25px);
    //     opacity: 1;
    //     color: #555555ff;
    //     font-size: pxTovw(17.5px);
    //     font-weight: pxTovw(400px);
    //     font-family: "PingFang SC";
    //     text-align: left;
    //     padding-left: pxTovw(15px);
    //   }
    // }
    .flower {
      width: pxTovw(375px);
      display: flex;
      margin: 0 auto;
      flex-wrap: wrap;
      justify-content:space-around;
      .flower-box {
        width: pxTovw(165px);
        background-color: #fff;
        margin-top: pxTovw(10px);
        .imgbox {
          width: pxTovw(165px);
          height: pxTovw(165px);
          img {
            width: 100%;
            height: 100%;
          }
        }
        p {
          width: pxTovw(165px);
          height: pxTovw(21px);
          margin-top: pxTovw(19px);
          margin-left: pxTovw(5px);
          font-size: pxTovw(14px);
          &:nth-of-type(2) {
            display: inline-block;
            font-size: pxTovw(14px);
            width: pxTovw(165px);
            height: pxTovw(30px);
            margin-top: pxTovw(0px);
            span {
              color: red;
              &:nth-of-type(2) {
                font-size: pxTovw(12px);
                display: inline-block;
                color: #e2e1e2;
                margin-left: pxTovw(33px);
              }
            }
          }
        }
      }
    }
  }
}

// 底部
}
.tabbar {
    background-color: #fff;
    position: fixed;
    width: pxTovw(375px);
    bottom: 0;
    display: flex;
    font-size: pxTovw(18px);
    justify-content:space-around;
    padding: pxTovw(10px) 0 pxTovw(10px);
    .down {
      flex: 1;
      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #000;
        &:hover{
         background-color: #b17a4f;
        }
        .foticon {
          color:#000;
          font-size:pxTovw(30px);
        }
        .logo{
            color: #b17a4f;
        }

        // span {
        //   font-size: font(30px);
        // }
      }
    }
  }
